<template>
  <view :class="classNameList" @click="onClick">
    <view v-if="prefixIcon" class="_prefix">
      <x-icon :name="prefixIcon" size="38" />
    </view>
    <view class="_title">{{title}}</view>
    <view class="_suffix">
      <view v-if="$slots.suffix" class="_suffix _slot">
        <slot name="suffix" />
      </view>
      <view v-else-if="suffix" class="_suffix">{{ suffix}}</view>
      <x-icon v-if="suffixIcon" :name="suffixIcon" :color="suffixIconColor" :size="suffixIconSize" />
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'XCell',
  components: {
    XIcon
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    showArrow: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'large'
    },
    last: {
      type: Boolean,
      default: false
    },
    strong: {
      type: Boolean,
      default: false
    },
    suffix: {
      type: String,
      default: ''
    },
    prefixIcon: {
      type: String,
      default: ''
    },
    suffixIcon: {
      type: [String, Boolean],
      default: ''
    },
    suffixColor: {
      type: String,
      default: ''
    },
    suffixIconColor: {
      type: String,
      default: '#A4A4A4'
    },
    suffixIconSize: {
      type: [Number, String],
      default: 26
    }
  },
  data() {
    return {};
  },
  computed: {
    // class列表
    classNameList() {
      const arr = ['x-cell', `is-${this.type}`, `is-${this.size}`];
      if (this.last) {
        arr.push('is-last');
      }
      if (this.strong) {
        arr.push('is-strong');
      }
      return arr.join(' ');
    }
  },
  watch: {},
  created() {

  },
  methods: {
    onClick(e) {
      if (this.url) {
        uni.navigateTo({
          url: this.url
        });
      }
      this.$emit('click', e);
    }
  }
};
</script>

<style lang="scss">
  .x-cell{
    background-color: #fff; border-bottom: 2px solid $uni-bg-color-grey; display: flex; align-items: center; padding: 0 26px; font-size: $uni-font-size-base;
    &:active{ background-color: $uni-bg-color-active;}
    // 大号
    &.is-large{
      height: $uni-height-size-lg;
    }
    // 中号
    &.is-medium{
      height: $uni-height-size-base;
    }
    // 小号
    &.is-small{
      height: $uni-height-size-sm;
    }
    ._prefix{ margin-right: 20px;}
    ._title{ flex: 1; text-align: left;}
    ._suffix{
      display: flex; align-items: center; line-height: 1;
      ._suffix{ padding: 0 5px; font-size: $uni-font-size-mini;}
    }
    &.is-alert{
      background: $uni-color-primary; background: linear-gradient(to right, $uni-color-secondary, $uni-color-primary); color: #fff; height: 70px;
      .x-icon{ color: #fff !important;}
    }
    &.is-last{ border-bottom: 0;}
    &.is-strong{
      ._title{ font-size: 30px; color: $uni-color-default; font-weight: bold;}
    }
  }
</style>
